<template>
	<view class="wrap">
		<view class="mains">
			<view class="item_parts" @click="searchclick">
				<view class="parts_L">部件类型</view>
				<block v-if="akeyState">
					<view class="parts_Rs" >{{checkObj.name?checkObj.name:"暂无数据"}}</view>
				</block>
				<block v-else>
					<view class="parts_R"><uni-icons color="" size="16" type="arrowright"></uni-icons></view>
				</block>
				
			</view>
			<view class="item_selected" v-if="prevData.length > 0" >
				<view class="selected_tit">已选择部件</view>
				<view class="selected_cont">
					<view class="cont" v-for="(items,i) in prevData" :key="i">{{items.name}}</view>
				</view>	
			</view>
			<view class="item_selected" style="display: flex;align-items: center;justify-content: center;height: 180rpx;" v-else >
				<view style="color: #C0C0C0; font-size: 30rpx;" >暂无部件数据</view>
			</view>
			
			<view class="item_pat" v-for="(item,index) in prevData" :key="index">
				<view class="pats">
					<view class="pats_L">
						{{item.name}}
					</view>
					<view class="pats_R" :style="{display:akeyState?'none;':'unset;'}" @click="removeParts(item,index)">
						删除部件
					</view>
				</view>
				<view class="item_test">
					<view class="test_title">检测记录</view>
					<view class="test_imgs">
						<!-- 根据id 区分 是否保存过 -->
						<block v-if="item.groupId" >
							<imageDragSort :list="item.imgUrl" max="9" :imgdel="true" @imgDels="imgDelsTest($event,item,'test')" @changeList="changeImgTest($event,item,'test')"></imageDragSort>
						</block>
						<block v-else >
							<imageDragSort max="9" :imgdel="true" @imgDels="imgDelsTest($event,item,'test')" @changeList="changeImgTest($event,item,'test')"></imageDragSort>
						</block>
					</view>
					<view class="test_area">
						<textarea :value="item.checkDesc" @blur="testValInput($event,item,'test')" placeholder="请在此输入备注…" />
					</view>
				</view>
				<view class="item_test" > 
					<view class="test_title">处理结果</view>
					<view class="test_imgs">
						<!-- 根据id 区分 是否保存过 -->
						<block v-if="item.groupId" >
						<imageDragSort :list="item.disposeImgUrl" max="9" :imgdel="true" @imgDels="imgDelsTest($event,item,'hand')" @changeList="changeImgTest($event,item,'hand')"></imageDragSort>
						</block>
						<block v-else >
							<imageDragSort max="9" :imgdel="true" @imgDels="imgDelsTest($event,item,'hand')" @changeList="changeImgTest($event,item,'hand')"></imageDragSort>
						</block>
					</view>
					<view class="test_area">
						<textarea :value="item.disposeDesc" @blur="testValInput($event,item,'hand')" placeholder="请在此输入备注…" />
					</view>
				</view>
			</view>
			
			<view class="item_bottms">
				<view class="bottms_R" @click="addMainClick">保存</view>
			</view>
			<view style="height: 100rpx;"></view>
		</view>
		<previewMedia ref="previewMedia"></previewMedia>
	</view>
</template>

<script>
import imageDragSort from '@/components/image-drag-sort/index.vue';
import unipopup from '@/components/uni-popup/uni-popup.vue';
import http from '@/utils/request.js';
import { hanleToken,throttle } from '@/utils/utils.js';
import {
	addPlanCheckHistory,
	removePlanCheckHistory,
	getPlanDetail,
	updatePlanCheckHistory,
	autoidID
} from '@/apis/maintains.js';
// import base64 from "@/utils/base64.js"
var base64 = require('@/utils/base64.js');
export default {
	name:'addMaintain',
	data() {
		return {
			// prevData:this.$store.state.parts.getDetailArr,
			prevObj:{},
			testVal:'',
			handVal:'',
			imgTestArr:[],
			imgHandArr:[],
			itemid:null,
			checkObj:null ,// 编辑id,
			akeyState:null ,// 重点保养不显示部件
			lockReq:true
		};
	},
	components:{
		imageDragSort,
		unipopup,
			
	},
	computed:{
		prevData:{
			get() {
				return this.$store.state.parts.getDetailArr;
			},
			set(val) {
				this.$store.state.parts.getDetailArr = val;
			}
			
		}
	},
	onLoad(options) {
		if (Object.keys(options).length > 0) {
			this.prevObj = JSON.parse(options.obj);
			if (options.checkId) {// 重点和普通保养编辑时需要的数据
				this.checkObj = JSON.parse(options.checkId);
				this.akeyState = Boolean(options.akeyState);
				let objs = {
					stateId:JSON.parse(options.obj).id,
					akeyState:Boolean(options.akeyState),
					groupId:JSON.parse(options.checkId).groupId
				}; 
				this.$store.dispatch('getDetail', objs);
			}
		}
	},
	onShow(opt) {
		autoidID().then(res=>{
			if (res.code == 200) {
				this.$store.commit('getDetailObj', res.data || '');
			} else {
				uni.showToast({
					title:'系统错误',
					icon:'none'
				});
			}
		});
		if (opt) {
			let objs = {
				stateId:this.prevObj.id,
				groupId:this.checkObj.groupId
			};
			this.$store.dispatch('getDetail',objs);
		}
	},
	onUnload() {
		let pages = getCurrentPages();
		let prevPage = pages[pages.length - 2];
		prevPage.onShow(this.prevObj);
		this.$store.commit('getDetailData',[]);
		let checkObj = this.checkObj || {};
		if (this.akeyState || Object.keys(checkObj).length > 0) {
			hanleToken('remove','testlistimg');
			hanleToken('remove','handArrlist');
			hanleToken('remove','getValTest');
			hanleToken('remove','getValHand');
		}
	},
	methods: {
			 
			 // 选择部件
		    searchclick() {
			if (this.akeyState) return; // 重点保养 不选部件
			let checkObj = this.checkObj || {};
			    uni.navigateTo({
				url:'./searchPageMain?obj=' + JSON.stringify(this.prevObj) + '&checkId=' + checkObj.groupId
			    });
		    },
		// 删除部件
		removeParts(obj,i) {
			if (obj.groupId) {// 区分是否保存过
				uni.showModal({
					content: '确定要删除保存过的部件吗？',
					cancelText: '否',
					confirmText: '是',
					success:(res)=> {
						if (res.confirm) {
							http.del(`/repairCheck/removePlanCheckHistory/${obj.id}`).then(res=>{
								if (res.code == 200) {
									this.prevData.splice(i,1);
									this.$store.commit('getDetailData',this.prevData);
								}
							}).catch(err=>{
								uni.showToast({
									title:'系统错误',
									icon:'none'
								});
							});
						}
					}
				});
			} else {
				uni.showModal({
					content: '确定要删除该部件吗？',
					cancelText: '否',
					confirmText: '是',
					success:(res)=> {
						if (res.confirm) {
							this.prevData.splice(i,1);
							this.$store.commit('getDetailData',this.prevData);
						}
					}
				});
			}
		},
		// pretendAddMain()
		// state: 区分图片添加和描述添加  edit：区分图片编辑和描述编辑
		pretendAddMain(imgArr,Data,index,state,edit) {
			var objArrUrl = [];
			var objStrDes = '';
			if (state) {
				if (imgArr.length > 0) {
					for (var a = 0; a < imgArr.length; a++) {
						if (Data[index].id == imgArr[a].id ) {
							if (edit) {
								objArrUrl = imgArr[a].disposeImgUrl;
							} else {
								objArrUrl = imgArr[a].imgUrl;
							}
						}
					}
				}
				return objArrUrl;
			} else {
				if (imgArr.length > 0) {
					for (var a = 0; a < imgArr.length; a++) {
						if (Data[index].id == imgArr[a].id ) {
							if (edit) {
								objStrDes = imgArr[a].disposeDesc;
							} else {
								objStrDes = imgArr[a].checkDesc;
							}
						}
					}
				}
				return objStrDes;
			}
		},
			
		// 添加
		addMainClick:throttle(function() {
			var imgArrTest = hanleToken('get','testlistimg') || [];
			var imgArrHand = hanleToken('get','handArrlist') || [];
			var getValueTest = hanleToken('get','getValTest') || [];
			var getValueHand = hanleToken('get','getValHand') || [];
			let arrData = [];
				
			let prevDatalen = this.prevData;
			for (var i = 0; i < prevDatalen.length; i++) { 
				var objArr = {
					elevatorId:this.prevObj.elevatorId,
					planId:this.prevObj.id,
					checkContentId:prevDatalen[i].id,
					imgUrl:[],
					checkDesc:'',
					disposeDesc:'',
					disposeImgUrl:[],
				};
				if (this.checkObj) {
					if (this.akeyState) {
						objArr.id = this.checkObj.id;
					} else {
						if (Object.keys(prevDatalen[i]).length < 3) {// 编辑时追加的部件
							this.checkObj.planCheckVoList.push({groupId:this.checkObj.groupId});
							objArr.groupId = this.checkObj.planCheckVoList[i].groupId;
							prevDatalen[i].checkContentId = prevDatalen[i].id;
						}
						objArr.id = this.checkObj.planCheckVoList[i].id;
					}
					objArr.checkContentId = prevDatalen[i].checkContentId;
				}
				objArr.imgUrl = this.pretendAddMain(imgArrTest,prevDatalen,i,true,false);
				objArr.disposeImgUrl = this.pretendAddMain(imgArrHand,prevDatalen,i,true,true);
				objArr.checkDesc = this.pretendAddMain(getValueTest,prevDatalen,i,false,false);
				objArr.disposeDesc = this.pretendAddMain(getValueHand,prevDatalen,i,false,true);
				arrData.push(objArr);
			}
				
			var lock = false;
			if (prevDatalen.length > 0) {
				var lockOne = arrData.some((item,i)=>{
					if (item.imgUrl.length <= 0 && !item.checkDesc ) {
						uni.showToast({
							title:'请上传图片或备注信息',
							icon:'none'
						});
						return true;
					} else {
						return false;
					}
				});
				var lockTwo = arrData.some((item,i)=>{
					if (!item.disposeDesc && item.disposeImgUrl.length <= 0) {
						uni.showToast({
							title:'请上传图片或备注信息',
							icon:'none'
						});
						return true;
					} else {
						return false;
					}
				});
				if (lockOne || lockTwo) {
					lock = true;
				}
			} else {
				uni.showToast({
					title:'请选择部件',
					icon:'none'
				});
				return;
			}
			if (lock) return;
				
			addPlanCheckHistory(arrData,this.$store.state.parts.autoid).then(res=>{
				if (res.code == 200) {
					// uni.hideLoading()
						
					uni.showToast({
						title:'保存成功',
						icon:'none'
					});
					setTimeout(()=>{
						uni.navigateBack({
							delta:1
						});
					},1000);
					hanleToken('remove','testlistimg');
					hanleToken('remove','handArrlist');
					hanleToken('remove','getValTest');
					hanleToken('remove','getValHand');
				} else {
					uni.showToast({
						title:'系统错误',
						icon:'none'
					});
				}
			});
		},1000),
		// 检测记录 处理结果 备注
		testValInput(obj,list,type) {
			let getVal = hanleToken('get','getValTest') || [];
			let getHand = hanleToken('get','getValHand') || [];
			if (type == 'test') {
				let desTest = obj.detail.value;
				if (desTest) {
					let res = getVal.concat([{
						id:list.id,
						checkDesc:desTest
					}]);
						 hanleToken('set','getValTest',res);
				} else {
					if (getVal.length > 0) {
						 hanleToken('remove','getValTest');
					}
				}
			} else {
				let desHand = obj.detail.value;
				if (desHand) {
					let resVal = getHand.concat([{
						id:list.id,
						disposeDesc:desHand
					}]);
						 hanleToken('set','getValHand',resVal);
				} else {
					if (getHand.length > 0) {
						 hanleToken('remove','getValHand');
					}
				}
			}
		},
		// 删除图片
		imgDelsTest(i,item,type) {
			let testImgDel = hanleToken('get','testlistimg') || [];
			let handImgDel = hanleToken('get','handArrlist') || [];
			if (type == 'test') {
				if (testImgDel.length > 0 ) {
					testImgDel.map((pre,j)=>{
						if (pre.id == item.id) {
							testImgDel[j].imgUrl.splice(i,1);
						}
					});
					hanleToken('set','testlistimg',testImgDel);
				}
			} else {
				if (handImgDel.length > 0 ) {
					handImgDel.map((pre,a)=>{
						if (pre.id == item.id) {
							handImgDel[a].disposeImgUrl.splice(i,1);
						}
					});
					hanleToken('set','handArrlist',handImgDel);
				}
			}
		},
			
		// 上传检测图片 处理图片
		changeImgTest(list,item,type) {
			let testImg = hanleToken('get','testlistimg') || [];
			let handImg = hanleToken('get','handArrlist') || [];
			if (type == 'test') {
				if (testImg.length > 0) {
					let res = testImg.concat([{
						id:item.id,
						imgUrl:list
					}]);
					hanleToken('set','testlistimg',res);
				} else {
					hanleToken('set','testlistimg',[{
						id:item.id,
						imgUrl:list
					}]);
				}
			} else {
				if (handImg.length > 0) {
					let resVal = handImg.concat([{
						id:item.id,
						disposeImgUrl:list
					}]);
					hanleToken('set','handArrlist',resVal);
				} else {
					hanleToken('set','handArrlist',[{
						id:item.id,
						disposeImgUrl:list
					}]);
				}
			}
		},
			
	},
	mounted() {
		this.$nextTick(function() {
		});
	}
};
</script>

<style lang="scss" scoped>
	
	page{
		background-color: #d8d8d8;
	 
	}
	.wrap{
		background-color: #FFFFFF;
		
	}
	.mains{
		margin: 0 auto;
		width: 720rpx;
		
	}
	.item_parts{
		display: flex;
		flex-direction: row;
		height: 80rpx;
		line-height: 80rpx;
		border-bottom: 1rpx #e9e9e9 solid;
		.parts_L{
			flex: 1;
		}
		.parts_R{
			flex: 1;
			text-align: right;
		}
		.parts_Rs{
			color: #cccccc;
			font-size: 28rpx;
		}
	}
	
	.item_selected{
		
		.selected_tit{
			height: 50rpx;
			margin-top: 20rpx;
			font-size: 28rpx;
			font-weight: 400;
			text-align: left;
			color: #666666;
			
		}
		.selected_cont{
			
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: flex-start;
			align-items: flex-start;
			align-content: flex-start;
			text-align: center;
			.cont{
				height: 50rpx;
				padding: 10rpx;
				background: #edf7ff;
				border-radius: 8rpx;
				opacity: 1;
				font-size: 26rpx;
				font-weight: 400;
				text-align: center;
				color: #0091ff;
				line-height: 50rpx;
				margin: 10rpx;
			}
		}
	}
	.item_pat{
		margin: 0 auto;
		width: 720rpx;
		
		.pats{
			display: flex;
			flex-direction: row;
			margin-top: 20rpx;
			.pats_L{
				flex: 1;
				font-size: 28rpx;
				font-weight: 500;
				color: #333333;
			}
			.pats_R{
				flex:0 0 200rpx;
				text-align: right;
				font-size: 28rpx;
				font-weight: 400;
				color: #999999;
			}
		}
		.item_test{
			display: flex;
			flex-direction: column;
			margin-top: 20rpx;
			.test_title{
				height: 80rpx;
				font-size: 28rpx;
				font-weight: 400;
				text-align: left;
				color: #666666;
				line-height: 40rpx;
			}
			.test_area{
				height: 80rpx;
				width: 100%;
				padding: 20rpx 0 20rpx 0;
				border-bottom: 1rpx #e9e9e9 solid;
				textarea{
					display: block;
					width: 100%;
					height: 100%;
				}
			}
		}
	}
	
	.item_bottms{
		position: fixed;
		bottom: 0;
		left:0;
		right: 0;
		height: 90rpx;
		display: flex;
		padding: 20rpx;
		line-height: 90rpx;
		flex-direction: row;
		align-items: center;
		justify-content:space-between;
		background: #ffffff;
		z-index: 300;
		// .bottms_L{
		// 	flex: 0 0 200rpx;
		// 	height: 70rpx;
		// 	background: #ffffff;
		// 	border-radius: 8rpx;
		// 	line-height: 70rpx;
		// 	text-align: center;
		// 	font-size: 28rpx;
		// 	font-weight: 500;
		// 	color: #666666;
		// 	border: 1rpx #e9e9e9 solid;
		// 	box-sizing: border-box;
		// }
		.bottms_R{
			flex:1rpx;
			height: 70rpx;
			background: #0091ff;
			border-radius: 8rpx;
			line-height: 70rpx;
			text-align: center;
			font-size: 28rpx;
			font-weight: 500;
			color: #ffffff;
		}
	}
</style>
